<template>
  <div>
    <l-dialog :title="'新增阶段'" :visible.sync="selectVisible" :height="200" :width="600" @ok="handleSaveSelect"
      @close="handleCloseForm" @opened="handleOpenedSelect" :showMinBtn="false" :showFullscreenBtn="false">
      <template v-if="selectVisible">
        <div class="l-rblock l-form-viewer" style="padding:20px ">
          <el-form :rules="rules" :model="formData" size="mini" labelPosition="right" labelWidth="100px"
            ref="selectForm">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item label="阶段类型" prop="selectStage">
                  <l-tree-select :options="stageOptions" v-model="formData.selectStage" labelKey="label"
                    :disabled="isDisabledStage" @change="changeStage" :parent="false" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="项目名称" prop="selectProject">
                  <l-remote-select ref="RemoteSelect" v-model="formData.selectProject" @change="changeProject"
                    @remoteMethod="loadProject" :hasAdd="false" :config="projectConfig" :disabled="isDisabledProject">
                  </l-remote-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </l-dialog>

    <!-- 编辑表单 -->
    <l-dialog :title="$t(formTitle)" :visible.sync="formVisible" :height="700" :width="1000" @close="handleCloseForm"
      @opened="handleOpenedForm" :hasBtns="false">
      <l-process-form v-if="formVisible" ref="form" @close="handleCloseForm" :config="formConfig"
        @refresh="refresh"></l-process-form>
    </l-dialog>

  </div>
</template>

<script>
import config from "../../../projectManagement/views/BasicInformation/columns";
import columns from "../../../Stage/js/columns";
export default {
  name: 'l-stage-add',
  components: {},
  props: {},
  data() {
    return {
      projectConfig: config,
      formData: {
        selectStage: "",
        selectProject: "",
      },
      rules: {},
      projectList: [],
      stageOptions: [],
      isDisabledStage: false,
      isDisabledProject: false,


      selectVisible: false,
      projectInfo: {},       // 当前选择项目信息
      stageInfo: {},         // 当前选择阶段信息


      formVisible: false,
      formConfig: {},

    };
  },
  computed: {
    formTitle() {
      return this.projectInfo.projectName + ' - ' + this.stageInfo.label

    },
    projectStage() {
      const data = this.lr_DataSource('projectStage')
      return data || []
    },
    stageList() {
      const data = this.lr_DataSource('businessStage')
      return data || []
    }
  },
  mounted() {
    this.lr_loadDataSourceData('businessStage') // 项目业务阶段
    this.lr_loadDataSourceData('projectStage') // 项目业务
    this.init()
  },
  methods: {
    init() {

    },

    async open({ projectInfo = {}, stageInfo = {} }) {
      this.selectVisible = true
      this.projectInfo = projectInfo
      // 选择阶段
      if (projectInfo.id) {
        this.formData.selectProject = projectInfo.id
        this.projectList = [this.projectInfo]

        this.isDisabledProject = true
        this.$nextTick(() => {
          this.$refs.RemoteSelect && this.$refs.RemoteSelect.setSearchList(this.projectInfo)
        })
        await this.loadStage() // 获取阶段列表
      }
      // 选择项目
      if (stageInfo.businessCode) {
        this.formData.selectStage = stageInfo.businessCode
        const stage = this.setBusinessData(stageInfo.businessCode)
        this.stageInfo = { label: stage.label, value: stage.business_code }
        this.stageOptions = [this.stageInfo]
        this.$nextTick(() => {
          this.$refs.RemoteSelect && this.$refs.RemoteSelect.init()
        })
        this.isDisabledStage = true
      }

    },

    handleCloseForm() {
      this.selectVisible = false
      this.formVisible = false
      Object.assign(this.$data, this.$options.data()) // 重置表单
    },
    refresh() {
      this.$emit('refresh')
    },

    //#region 项目、阶段 选择
    /** 获取项目列表 */
    async loadProject(keyword, callback) {
      const api = window.$crud("project/model/list");
      const data = await this.$awaitWraper(api.getInfo({ keyword: keyword, businessCode: this.formData.selectStage }));
      this.projectList = data.map(t => ({ id: t.projectId, ...t }))
      callback(this.projectList)
    },
    /** 下拉框 项目选择 change事件 */
    changeProject(data) {
      this.projectInfo = data
    },

    /** 获取项目未绑定业务阶段列表 */
    async loadStage() {
      const api = window.$crud("project/unbind/business/list");
      const data = await this.$awaitWraper(api.getInfo({ projectId: this.formData.selectProject }));
      data.forEach(t => {
        const item = this.stageList.find(s => s.business_code == t.businessCode)
        t.stageCode = item.stage_code
        t.routeCode = item.route_code
        t.label = t.businessName
        t.value = t.businessCode
      })
      this.stageOptions = this.projectStage.map(t => {
        const item = data.filter(s => s.stageCode == t.stage_code)
        t.children = item || []
        t.value = t.stage_name
        return t
      }).filter(f => f.children.length > 0)
    },
    /** 下拉框 阶段选择 change事件 */
    changeStage(data) {
      this.stageInfo = data
      // this.formData.selectStage = data.businessCode
    },
    /** 根据阶段 business_code 获取阶段信息 */
    setBusinessData(businessCode) {
      const stage = this.stageList.find((t) => t.business_code == businessCode);
      return stage
    },


    handleSaveSelect() {
      this.formConfig = columns[this.stageInfo.routeCode]
      this.formVisible = true
    },


    async handleOpenedSelect(showLoading, hideLoading) {
      showLoading('加载数据中...')

      hideLoading()
    },
    //#endregion




    //#region 新增表单


    async handleOpenedForm(showLoading, hideLoading) {
      showLoading('加载数据中...')
      this.$refs.form.projectId = this.formData.selectProject
      this.$refs.form.formData.projectName = this.projectInfo.projectName
      this.$refs.form.formData.projectCode = this.projectInfo.projectCode
      hideLoading()
    },
    //#endregion


  }
};
</script>
<style lang="scss" scoped>
.provinces_select {
  height: 100%;
  .projectName {
    height: 35px;
    font-size: 14px;
    line-height: 35px;
  }
}
.empty-class {
  height: 30px;
  line-height: 42px;
  padding-left: 21px;
}
</style>